<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./lib/swiper-bundle.min.css" />
    <script src="./lib/swiper-bundle.min.js"></script>
    <script src="./js/jquery-3.6.0.js"></script>

    <link rel="stylesheet" href="./css/index.css" />
  </head>
  <body>
    <div class="header">
      <div class="content">
        <ul class="header_left">
          <li>
            <a href="#"
              >网站导航<img src="./public/image/路径 4.png" alt=""
            /></a>
            <ul>
              <li><a href="#">导航1</a></li>
              <li><a href="#">导航2</a></li>
              <li><a href="#">导航3</a></li>
              <li><a href="#">导航4</a></li>
            </ul>
          </li>
          <li>
            <a href="#"
              >商家入驻<img src="./public/image/路径 4.png" alt=""
            /></a>
            <ul>
              <li><a href="#">商家入驻</a></li>
              <li><a href="#">商家入驻</a></li>
              <li><a href="#">商家入驻</a></li>
              <li><a href="#">商家入驻</a></li>
            </ul>
          </li>
          <li>
            <a href="#"
              >客户服务<img src="./public/image/路径 4.png" alt=""
            /></a>
          </li>
          <li>
            <a href="#">
              <img src="./public/image/定位.svg" />
              <p>北京</p>
              <img src="./public/image/下拉-下.svg" alt="" />
            </a>
          </li>
        </ul>
        <ul class="header_right">
          <li><a href="#">请登录</a></li>
          <li><a href="#">登录有礼</a></li>
          <li>
            <a href="#"
              >我的订单 <img src="./public/image/路径 4.png" alt=""
            /></a>
          </li>
          <li>
            <a href="#"
              >我的乐购 <img src="./public/image/路径 4.png" alt=""
            /></a>
          </li>
          <li><a href="#">乐购会员</a></li>
          <li>
            <a href="#"
              >购物车 <img src="./public/image/路径 4.png" alt=""
            /></a>
          </li>
          <li><a href="#">易付宝</a></li>
          <li><a href="#">企业采购</a></li>
          <li>
            <a href="#"
              >手机采购 <img src="./public/image/路径 4.png" alt=""
            /></a>
          </li>
        </ul>
      </div>
    </div>
    <div class="nav">
      <div class="logo">
        <h1>
          <img src="./public/image/图层 1.png" alt="" />
        </h1>
      </div>
      <div class="search">
        <img src="./public/image/搜索 (1).png" alt="" />
        <input type="text" / placeholder="跨店每300减30">
        <div class="nav_1">
          <a href="#">手机</a> | <a href="#">电动牙刷</a> |
          <a href="#">电视</a> | <a href="#">海尔空调</a> |
          <a href="#">洗衣机</a> | <a href="#">茅台</a> |
          <a href="#">热水器</a> | <a href="#">ipad</a> |
          <a href="#">微波炉</a>
        </div>
      </div>
      <button><a href="#">搜索</a></button>
    </div>
    <div class="content_1">
      <p>
        <img src="./public/image/更多.png" alt="" />
        <span>全部商品分类</span>
      </p>

      <ul>
        <li><a href="#">限时抢购</a></li>
        <li><a href="#">红孩子</a></li>
        <li><a href="#">欢喜超市</a></li>
        <li><a href="#">电器城</a></li>
        <li><a href="#">生活家电</a></li>
        <li><a href="#">时尚服饰</a></li>
        <li><a href="#">微波炉</a></li>
      </ul>
    </div>
    <div class="content_2">
      <div>
        <ul>
          <li>
            <a href="#">手机</a><a href="#">运营商</a><a href="#">智能数码</a>
          </li>
          <li><a href="#">家用电器</a><a href="#">帮课</a></li>
          <li>
            <a href="#">厨卫</a><a href="#">生活家电</a><a href="#">厨具</a>
          </li>
          <li>
            <a href="#">电脑办公</a><a href="#">相机</a><a href="#">电竞</a>
          </li>
          <li>
            <a href="#">家具</a><a href="#">家装</a><a href="#">家纺</a
            ><a href="#">灯具</a>
          </li>
          <li>
            <a href="#">食品</a><a href="#">酒水</a><a href="#">生鲜</a
            ><a href="#">特产</a>
          </li>
          <li>
            <a href="#">美妆</a><a href="#">个护</a><a href="#">清洁</a
            ><a href="#">宠物</a>
          </li>
          <li>
            <a href="#">母婴</a><a href="#">玩具</a><a href="#">车床</a
            ><a href="#">童装</a>
          </li>
          <li>
            <a href="#">运动</a><a href="#">户外</a><a href="#">国米</a
            ><a href="#">骑行</a>
          </li>
          <li>
            <a href="#">女装</a><a href="#">男装</a><a href="#">内衣</a
            ><a href="#">鞋靴</a>
          </li>
          <li>
            <a href="#">箱包</a><a href="#">钟表</a><a href="#">珠宝</a
            ><a href="#">艺术</a>
          </li>
          <li>
            <a href="#">汽车</a><a href="#">电摩</a><a href="#">汽车用品</a>
          </li>
          <li>
            <a href="#">图书</a><a href="#">艺术</a><a href="#">原版</a
            ><a href="#">文学</a>
          </li>
          <li><a href="#">医药健康</a><a href="#">计生情趣</a></li>
          <li><a href="#">理财</a><a href="#">分期</a><a href="#">便民</a></li>
        </ul>
      </div>
    </div>
    <div class="banner">
      <!-- Swiper -->
      <div class="swiper mySwiper">
        <div class="swiper-wrapper">
          <div class="swiper-slide">
            <img src="./images/蒙版组 8.png" alt="" />
          </div>
          <div class="swiper-slide">
            <img src="./images/蒙版组 9.png" alt="" />
          </div>
          <div class="swiper-slide">
            <img src="./images/蒙版组 10.png" alt="" />
          </div>
          <div class="swiper-slide">
            <img src="./images/蒙版组 11.png" alt="" />
          </div>
          <div class="swiper-slide">
            <img src="./images/蒙版组 12.png" alt="" />
          </div>
        </div>
        <div class="swiper-button-next"></div>
        <div class="swiper-button-prev"></div>
        <div class="swiper-pagination"></div>
      </div>
    </div>
    <!-- 限时秒杀 -->
    <div class="spike">
      <ul>
        <li>
          <p>限时秒杀</p>
          <span>距离下场</span>
          <i>00</i>
          <i>00</i>
          <i>00</i>
        </li>
        <li>
          <p>16.00场正在疯抢</p>
          <span>20:00场-即将开抢</span>
        </li>
      </ul>
      <hr />
      <ul class="spike_2">
        <li>
          <img src="./images/商品2.png" alt="" />
          <p class="word1">维达 卫生纸 蓝色经典4层</p>
          <p class="word2">¥20.90 <del> ¥20.90</del></p>
          <p class="word3"><em></em><i>已抢36%</i></p>
        </li>
        <li>
          <img src="./images/商品1.png" alt="" />
          <p class="word1">维达 卫生纸 蓝色经典4层</p>
          <p class="word2">¥20.90 <del> ¥20.90</del></p>
          <p class="word3"><em></em><i>已抢36%</i></p>
        </li>
        <li>
          <img src="./images/商品2.png" alt="" />
          <p class="word1">维达 卫生纸 蓝色经典4层</p>
          <p class="word2">¥20.90 <del> ¥20.90</del></p>
          <p class="word3"><em></em><i>已抢36%</i></p>
        </li>
        <li>
          <img src="./images/商品1.png" alt="" />
          <p class="word1">维达 卫生纸 蓝色经典4层</p>
          <p class="word2">¥20.90 <del> ¥20.90</del></p>
          <p class="word3"><em></em><i>已抢36%</i></p>
        </li>
        <li>
          <img src="./images/商品2.png" alt="" />
          <p class="word1">维达 卫生纸 蓝色经典4层</p>
          <p class="word2">¥20.90 <del> ¥20.90</del></p>
          <p class="word3"><em></em><i>已抢36%</i></p>
        </li>
        <li>
          <img src="./images/商品1.png" alt="" />
          <p class="word1">维达 卫生纸 蓝色经典4层</p>
          <p class="word2">¥20.90 <del> ¥20.90</del></p>
          <p class="word3"><em></em><i>已抢36%</i></p>
        </li>
      </ul>
    </div>
    <!-- 发现好货 -->
    <div class="Find">
      <div></div>
      <div>
        <ul>
          <li><span>键盘</span><img src="./images/1.jpg" alt="" /></li>
          <li><span>家用电热锅</span><img src="./images/2.jpg" alt="" /></li>
          <li><span>手表</span><img src="./images/3.png" alt="" /></li>
          <li><span>电车</span><img src="./images/4.jpg" alt="" /></li>
          <li><span>莲</span><img src="./images/5.jpg" alt="" /></li>
        </ul>
        <p><em></em></p>
      </div>
    </div>
    <!-- 年货节 -->
    <div class="tcl">
      <ul>
        <li>
          <span
            >TCL年货节<br />
            <i>爆款直降2000元</i></span
          ><img src="./images/8_1.png" alt="" />
        </li>
        <li>
          <span>TCL年货节 <br /><i>爆款直降2000元</i></span
          ><img src="./images/6.png" alt="" />
        </li>
        <li>
          <span
            >TCL年货节 <br />
            <i>爆款直降2000元</i></span
          ><img src="./images/7.png" alt="" />
        </li>
      </ul>
    </div>
    <!-- 排行榜 -->
    <div class="ranking">
      <div>
        <p>排行榜</p>
        <p>更多<img src="./images/更多1.png" alt="" /></p>
      </div>
      <div class="tab_top">
        <ul>
          <li>精选</li>
          <li>休闲食品</li>
          <li>纸品清洁</li>
          <li>小u生鲜</li>
        </ul>
      </div>
      <div class="tab show">
        <img src="./images/排行榜118_118.png" alt="" />
        <div>
          <p>69任选12件【三只松鼠_猕猴桃干100g】 <br />办公室零食蜜饯水果</p>
          <p><span>¥19.80</span><i>休闲食品销量NO1</i></p>
        </div>
      </div>
      <div class="tab">
        <img src="./images/排行榜118_118.png" alt="" />
        <div>
          <p>69任选12件【三只松鼠_猕猴桃干100g】 <br />办公室零食蜜饯水果</p>
          <p><span>¥19.80</span><i>休闲食品销量NO1</i></p>
        </div>
      </div>
      <div class="tab">
        <img src="./images/排行榜118_118.png" alt="" />
        <div>
          <p>69任选12件【三只松鼠_猕猴桃干100g】 <br />办公室零食蜜饯水果</p>
          <p><span>¥19.80</span><i>休闲食品销量NO1</i></p>
        </div>
      </div>
      <div class="right">
        <div>
          <p>人气好货</p>
          <p>更多<img src="./images/更多1.png" alt="" /></p>
        </div>
        <ul>
          <li>
            <img src="./images/人气商品160_160.png" alt="" />
            <p>飞利浦 电动剃须刀</p>
            <i>今日特价6.5折起</i>
          </li>
          <li>
            <img src="./images/人气商品160_160.png" alt="" />
            <p>飞利浦 电动剃须刀</p>
            <i>今日特价6.5折起</i>
          </li>
          <li>
            <img src="./images/人气商品160_160.png" alt="" />
            <p>飞利浦 电动剃须刀</p>
            <i>今日特价6.5折起</i>
          </li>
          <li>
            <img src="./images/人气商品160_160.png" alt="" />
            <p>飞利浦 电动剃须刀</p>
            <i>今日特价6.5折起</i>
          </li>
          <li>
            <img src="./images/人气商品160_160.png" alt="" />
            <p>飞利浦 电动剃须刀</p>
            <i>今日特价6.5折起</i>
          </li>
          <li>
            <img src="./images/人气商品160_160.png" alt="" />
            <p>飞利浦 电动剃须刀</p>
            <i>今日特价6.5折起</i>
          </li>
          <li>
            <img src="./images/人气商品160_160.png" alt="" />
            <p>飞利浦 电动剃须刀</p>
            <i>今日特价6.5折起</i>
          </li>
          <li>
            <img src="./images/人气商品160_160.png" alt="" />
            <p>飞利浦 电动剃须刀</p>
            <i>今日特价6.5折起</i>
          </li>
        </ul>
      </div>
    </div>

    <!-- 服装配饰 -->
    <div class="clothing">
      <div>
        <div>
          <p>服装配饰</p>
          <p><em>鸿星尔克</em><em>斯凯奇</em><em>耐克</em><em>阿迪达斯</em></p>
        </div>
        <div>
          <img src="./images/户外运动230_437.png" alt="" / >

          <div>
            <p>七匹狼</p>
            <p>七匹狼</p>

            <p>七匹狼</p>
            <p>七匹狼</p>
          </div>
        </div>
      </div>
      <div>
        <div>
          <p>服装配饰</p>
          <p><em>鸿星尔克</em><em>斯凯奇</em><em>耐克</em><em>阿迪达斯</em></p>
        </div>
        <div>
          <img src="./images/户外运动230_437.png" alt="" / >

          <div>
            <p>七匹狼</p>
            <p>七匹狼</p>

            <p>七匹狼</p>
            <p>七匹狼</p>
          </div>
        </div>
      </div>
      <div class="x">
        <div>
          <p>服装配饰</p>
          <p><em>鸿星尔克</em><em>斯凯奇</em><em>耐克</em><em>阿迪达斯</em></p>
        </div>
        <div>
          <img src="./images/户外运动230_437.png" alt="" / >

          <div>
            <p>七匹狼</p>
            <p>七匹狼</p>

            <p>七匹狼</p>
            <p>七匹狼</p>
          </div>
        </div>
      </div>
      <div class="x">
        <div>
          <p>服装配饰</p>
          <p><em>鸿星尔克</em><em>斯凯奇</em><em>耐克</em><em>阿迪达斯</em></p>
        </div>
        <div>
          <img src="./images/户外运动230_437.png" alt="" / >

          <div>
            <p>七匹狼</p>
            <p>七匹狼</p>

            <p>七匹狼</p>
            <p>七匹狼</p>
          </div>
        </div>
      </div>
    </div>

    <!-- 年货节 -->
    <div class="tcl tcl_1">
      <ul>
        <li>
          <span
            >TCL年货节<br />
            <i>爆款直降2000元</i></span
          ><img src="./images/8_1.png" alt="" />
        </li>
        <li>
          <span>TCL年货节 <br /><i>爆款直降2000元</i></span
          ><img src="./images/6.png" alt="" />
        </li>
        <li>
          <span
            >TCL年货节 <br />
            <i>爆款直降2000元</i></span
          ><img src="./images/7.png" alt="" />
        </li>
      </ul>
    </div>
    <!-- 猜你喜欢 -->
    <div class="love">
      <p>猜你喜欢</p>
      <ul>
        <li>
          <img src="./images/商品244_244.png" alt="" />
          <p>
            骗的就是你苹果电脑超薄屏幕，护眼<br />
            防蓝光 <span>不要错过，不要辜负</span>
          </p>

          <p class="jg">￥4999.00</p>
        </li>
        <li>
          <img src="./images/商品244_244.png" alt="" />
          <p>
            骗的就是你苹果电脑超薄屏幕，护眼<br />
            防蓝光 <span>不要错过，不要辜负</span>
          </p>

          <p class="jg">￥4999.00</p>
        </li>
        <li>
          <img src="./images/商品244_244.png" alt="" />
          <p>
            骗的就是你苹果电脑超薄屏幕，护眼<br />
            防蓝光 <span>不要错过，不要辜负</span>
          </p>

          <p class="jg">￥4999.00</p>
        </li>
        <li>
          <img src="./images/商品244_244.png" alt="" />
          <p>
            骗的就是你苹果电脑超薄屏幕，护眼<br />
            防蓝光 <span>不要错过，不要辜负</span>
          </p>

          <p class="jg">￥4999.00</p>
        </li>
        <li>
          <img src="./images/商品244_244.png" alt="" />
          <p>
            骗的就是你苹果电脑超薄屏幕，护眼<br />
            防蓝光 <span>不要错过，不要辜负</span>
          </p>

          <p class="jg">￥4999.00</p>
        </li>
      </ul>
      <ul>
        <li>
          <img src="./images/商品244_244.png" alt="" />
          <p>
            骗的就是你苹果电脑超薄屏幕，护眼<br />
            防蓝光 <span>不要错过，不要辜负</span>
          </p>

          <p class="jg">￥4999.00</p>
        </li>
        <li>
          <img src="./images/商品244_244.png" alt="" />
          <p>
            骗的就是你苹果电脑超薄屏幕，护眼<br />
            防蓝光 <span>不要错过，不要辜负</span>
          </p>

          <p class="jg">￥4999.00</p>
        </li>
        <li>
          <img src="./images/商品244_244.png" alt="" />
          <p>
            骗的就是你苹果电脑超薄屏幕，护眼<br />
            防蓝光 <span>不要错过，不要辜负</span>
          </p>

          <p class="jg">￥4999.00</p>
        </li>
        <li>
          <img src="./images/商品244_244.png" alt="" />
          <p>
            骗的就是你苹果电脑超薄屏幕，护眼<br />
            防蓝光 <span>不要错过，不要辜负</span>
          </p>

          <p class="jg">￥4999.00</p>
        </li>
        <li>
          <img src="./images/商品244_244.png" alt="" />
          <p>
            骗的就是你苹果电脑超薄屏幕，护眼<br />
            防蓝光 <span>不要错过，不要辜负</span>
          </p>

          <p class="jg">￥4999.00</p>
        </li>
      </ul>
      <ul>
        <li>
          <img src="./images/商品244_244.png" alt="" />
          <p>
            骗的就是你苹果电脑超薄屏幕，护眼<br />
            防蓝光 <span>不要错过，不要辜负</span>
          </p>

          <p class="jg">￥4999.00</p>
        </li>
        <li>
          <img src="./images/商品244_244.png" alt="" />
          <p>
            骗的就是你苹果电脑超薄屏幕，护眼<br />
            防蓝光 <span>不要错过，不要辜负</span>
          </p>

          <p class="jg">￥4999.00</p>
        </li>
        <li>
          <img src="./images/商品244_244.png" alt="" />
          <p>
            骗的就是你苹果电脑超薄屏幕，护眼<br />
            防蓝光 <span>不要错过，不要辜负</span>
          </p>

          <p class="jg">￥4999.00</p>
        </li>
        <li>
          <img src="./images/商品244_244.png" alt="" />
          <p>
            骗的就是你苹果电脑超薄屏幕，护眼<br />
            防蓝光 <span>不要错过，不要辜负</span>
          </p>

          <p class="jg">￥4999.00</p>
        </li>
        <li>
          <img src="./images/商品244_244.png" alt="" />
          <p>
            骗的就是你苹果电脑超薄屏幕，护眼<br />
            防蓝光 <span>不要错过，不要辜负</span>
          </p>

          <p class="jg">￥4999.00</p>
        </li>
      </ul>
    </div>

    <div class="footer">
      <div class="footer_box">
        <ul>
          <li><a href="#">购物指南</a></li>
          <li><a href="#">免费注册</a></li>
          <li><a href="#">会员等级</a></li>
          <li><a href="#">常见问题</a></li>
        </ul>
        <ul>
          <li><a href="#">售后服务</a></li>
          <li><a href="#">退换货政策</a></li>
          <li><a href="#">贵就陪</a></li>
          <li><a href="#">维修 / 安装</a></li>
          <li><a href="#">订单修改</a></li>
          <li><a href="#">退换货申请</a></li>
        </ul>
        <ul>
          <li><a href="#">物流配送</a></li>
          <li><a href="#">运费政策</a></li>
          <li><a href="#">物流配送服务</a></li>
          <li><a href="#">签收验货</a></li>
          <li><a href="#">物流查询</a></li>
        </ul>
        <ul>
          <li><a href="#">支付方式</a></li>
          <li><a href="#">网银支付</a></li>
          <li><a href="#">快捷支付</a></li>
          <li><a href="#">分期付款</a></li>
          <li><a href="#">货到付款</a></li>
        </ul>
        <ul>
          <li><a href="#">用户帮助</a></li>
          <li><a href="#">免费注册</a></li>
          <li><a href="#">找回密码</a></li>
          <li><a href="#">常见问题</a></li>
          <li><a href="#">优惠卷使用</a></li>
        </ul>
      </div>
      <hr />
      <div class="beian">
        <p>蓝湖文化科技有限公司 版权所有 保留一切权利</p>
        <p>
          京ICP备10218183号 京ICP证161188号
          京公网安备11010802020593号出版物经营许可证新出发京批字第直130052号
        </p>
      </div>
    </div>
    <!-- 电梯导航 -->

    <script>
      var swiper = new Swiper(".mySwiper", {
        autoplay: true,
        slidesPerView: 1,
        spaceBetween: 30,
        loop: true,
        pagination: {
          el: ".swiper-pagination",
          clickable: true,
        },
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
      });
    </script>
  </body>
</html>
